<template>
	<view class="">
		<view class="box">
			<view  :style="[scroll_box]">
				<slot name="scrollArr" :scroll_list='scroll_list'></slot>
			</view>
		</view>
	</view>


</template>

<script>
	/*
	 * @param {list,Array} 滚动数据
	 * @param {time,Number} 滚动间隔时间
	 */
	export default {
		name: "scrollList",
		props: {
			list: {
				type: Array,
				default: []
			},
			time: {
				typeof: Number,
				default: 2000
			}
		},
		data() {
			return {
				scroll_list: this.list,
				timer: null, //定时器
				scroll_box: {}, //上拉加载样式
			}
		},
		mounted() {

		},
		methods: {
			scroll() {
				if (this.scroll_list.length <= 4) { //低于4条不滚动
					return
				}
				clearInterval(this.timer);
				this.timer = setInterval(() => {
					setTimeout(() => {
						this.scroll_list.push(this.scroll_list[0])
						this.scroll_list.shift()
						this.scroll_box = {
							'margin-top': 0,
							'transition': ''
						}
					}, 500)

					this.scroll_box = {
						'margin-top': '-60rpx',
						'transition': 'all 0.5s'
					}
				}, this.time)
			},
		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
		watch: {
			list: {
				handler(news, old) {
					this.scroll_list = news
					this.scroll()
				},
				deep: true,
				immediate: true,
			},
		},
	}
</script>

<style lang="scss" scoped>
	.box {
		height: 520upx;
		line-height: 60upx;
		overflow: hidden;
	}
</style>
